import {createRouter, createWebHistory} from 'vue-router'
// 导入加载进度条
import NProgress from 'nprogress'
// 显示右上角螺旋加载提示
NProgress.configure({showSpinner: true})
// 获取状态管理的token
import {useUserStore} from '@/stores/user.js'
// 获取菜单标签页的状态管理
import {useMenuTabStore} from "@/stores/menuTab.js";
// 导入自定义页面布局组件
import Layout from '@/layout/Index.vue'
import PageMain from '@/layout/components/PageMain.vue'
import {menuTreeData} from "@/mock/data.js";
import settings from '@/settings.js'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Layout
        },
        {
            path: '/login',
            name: 'Login',
            meta: {title: "login"},
            component: () => import('@/views/Login.vue')
        },
    ]
})

// 动态加载404页面
const router404 = {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/error/NotFound.vue')
}

// 前置守卫
router.beforeEach(async (to, from, next) => {
    // 开启进度条
    NProgress.start()
    // 获取用户状态管理对象
    const userStore = useUserStore()
    // 获取菜单标签页的管理对象
    const menuTabStore = useMenuTabStore()

    // 如果当前是登录状态，用户又访问登录，属于无用操作，应该跳转到首页去
    if (to.path === '/login') {
        if (userStore.isLogin) {
            next({name: "Home"})
        }
        next()
    }

    // 判断是否登录
    if (!userStore.isLogin) {
        if (to.name !== 'Login'){
            // query 是记录最后一次请求的路径，如果登录成功后，会跳转到最后一次访问的路径中
            next({ name: 'Login', query: { "path": to.path }})
        }else{
            next()
        }
    }else{
        // 动态加载路由
        const userStore = useUserStore()
        // 动态添加404页面
        router.addRoute(router404)

        // 动态添加菜单
        if (userStore.menuTree && userStore.menuTree.length > 0) {
            addDynamicRoutes(userStore.menuTree)
        }

        // 如果刷新出现空白的问题，那么就使用下面这行代码
        if (!to.name && hasRoute(to)) {
            next({ ...to })
        }

        // 如果访问的是首页，就跳转到/dashboard页面
        if (to.path === "/") {
            // 读取默认菜单的默认页面,需要从数据库的菜单表中去读取
            next(settings.defaultPage)
        }

        next()
    }
})


// 获取工程目录views下，所有以.vue结尾的spa页面
const modules = import.meta.glob('../views/**/*.vue');

// 添加动态路由
function addDynamicRoutes(menuTreeData, parent) {
    // 遍历菜单信息
    menuTreeData.forEach((item, index) => {
        // 路由数据
        const route = {
            path: item.path,
            name: item.name,
            meta: {name: item.name, icon: item.icon},
            children: []
        }
        // 如果parent存在，证明有children数据
        if (parent) {
            if (item.parentId !== 0) {
                // 匹配views下的spa页面
                const compParr = item.path.replace("/", "").split("/");
                const l = compParr.length - 1;
                const compPath = compParr
                    .map((v, i) => {
                        return i === l ? v.replace(/\w/, (L) => L.toUpperCase()) + ".vue" : v;
                    })
                    .join("/");
                route.path = compParr[l];
                // 设置动态组件
                route.component = modules[`../views/${compPath}`];
                parent.children.push(route);
            }
        } else {
            // 判断是否有children
            if (item.children && item.children.length > 0) {
                // 这里的含义是：把匹配到菜单数据第一项作为首页的入口页面
                // /order-----redirect-----/order/list
                route.redirect = item.children[0].path;
                route.component = PageMain;
                // 递归
                addDynamicRoutes(item.children, route)
            } else {
                //route.component = modules[`../views/${item.name}.vue`]
                route.component = modules[`../views/${item.name.toLowerCase()}/Index.vue`]
            }
            router.addRoute("Home", route);
        }
    })
}

// 判断当前路由是否存在动态添加的路由数据中
function hasRoute(to) {
    const item = router.getRoutes().find((item) => item.path === to.path);
    return !!item;
}

router.afterEach((to) => {
    // 获取菜单tab的状态信息
    const menuTabStore = useMenuTabStore();
    // 添加菜单标签页的路由
    menuTabStore.addMenuTab(to);
    // 结束进度条
    NProgress.done()
})
export default router
